// global transition css

.tl-fade {
    /* tl-fade */
    &-enter-active,
    &-leave-active {
        transition: opacity 0.28s;
    }
    &-enter,
    &-leave-active {
        opacity: 0;
    }
    /* tl-fade-transform */
    &-transform-leave-active,
    &-transform-enter-active {
        transition: all .5s;
    }

    &-transform-enter {
        opacity: 0;
        transform: translateX(-30px);
    }

    &-transform-leave-to {
        opacity: 0;
        transform: translateX(30px);
    }
}

/* tl-breadcrumb transition */
.tl-breadcrumb {
    &-enter-active,
    &-leave-active {
        transition: all .5s;
    }

    &-enter,
    &-leave-active {
        opacity: 0;
        transform: translateX(20px);
    }

    &-move {
        transition: all .5s;
    }

    &-leave-active {
        position: absolute;
    }
}
